<!-- 新增物资页面 -->
<template>
  <div>
    <div class="good-info">
      <div class="good-form">
        <div class="moreSty">
          <van-field v-model="form.purchaser" class="basicClass" label="采购人" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.purchaser = $event.detail" />
        </div>
        <div class="selectSty">
          <van-field v-model="form.materialType" class="inputClass" label="物资类型" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @change="form.materialType = $event.detail" @click-input="clickInput('materialType')" />
          <van-popup class="dropClass" :show="showPicker" position="bottom">
            <van-picker show-toolbar :columns="typeList" @cancel="onCancel('materialType')" @confirm="onConfirm" />
          </van-popup>
        </div>
        <div class="selectSty">
          <van-field v-model="form.itemName" class="inputClass" label="物资名称" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @change="form.itemName = $event.detail" @click-input="clickInput('itemName')" />
          <van-popup class="dropClass" :show="showName" position="bottom">
            <van-picker show-toolbar :columns="nameList" @cancel="onCancel('itemName')" @confirm="onNameConfirm" />
          </van-popup>
          <!-- <van-field v-model="form.itemName" class="basicClass" label="物资名称" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.itemName = $event.detail" /> -->
        </div>
        <div class="moreSty">
          <van-field v-model="form.model" class="basicClass" label="型号" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.model = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="form.code" class="basicClass" label="编号" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.code = $event.detail" />
        </div>
        <div class="selectSty">
          <van-field v-model="status" class="inputClass" label="状态" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @change="form = $event.detail" @click-input="clickInput('status')" />
          <van-popup class="dropClass" :show="showState" position="bottom">
            <van-picker show-toolbar :columns="stateList" @cancel="onCancel('status')" @confirm="onStateConfirm" />
          </van-popup>
        </div>
        <div class="selectSty">
          <van-field v-model="form.purchaseDate" label="采购日期" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @change="form.purchaseDate = $event.detail" @click-input="clickBirth" />
          <van-popup :show="showBirth" position="bottom">
            <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onBrith" @cancel="onCancelBrith" />
          </van-popup>
        </div>
        <div class="moreSty">
          <van-field v-model="form.recipient" class="basicClass" label="受用人" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.recipient = $event.detail" />
        </div>
        <div class="moreSty">
          <van-field v-model="form.number" class="basicClass" label="数量" placeholder-style="color:#999;" placeholder="请输入" autosize type="input" @change="form.number = $event.detail" />
        </div>
        <div class="good-picture">
          <ze-upload v-model="form.pictures" style="width: 100%;" type="upload" label="图片" />
        </div>
        <div class="mine">
          <van-field v-model="form.remarks" label="备注" class="evaluates" placeholder-style="color:#999;" autosize type="textarea" placeholder="请输入" @change="form.remarks = $event.detail" />
        </div>
      </div>
      <div class="good-btns">
        <van-button size="large" color="linear-gradient(180deg, #739ECA 0%, #ABCDE7 100%)" class="submit" round @click="submitPerson">
          确定新增
        </van-button>
      </div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import zeUpload from '@/components/ze-oa-form/ze-upload.vue'
import { chooseAndUploadImages } from '@/utils/upload'
import { DICT_TYPE, getDictDatas } from '@/utils/dict'
import { addMaterials } from '@/apis/office'
export default {
  components: { zeUpload },
  data() {
    return {
      showPicker: false,
      showState: false,
      showBirth: false,
      showName: false,
      form: {
        purchaser: undefined,
        materialType: undefined,
        itemName: undefined,
        model: undefined,
        code: undefined,
        status: undefined,
        purchaseDate: undefined,
        recipient: undefined,
        number: undefined,
        remarks: undefined,
        pictures: [],
      },
      status: undefined,
      // 状态list
      stateList: ['未用', '已用', '维修'],
      currentDate: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
      // 物资类型
      typeList: [],
      // 物资名称
      nameList: [],
    }
  },
  mounted() {
    this.getType()
    this.getName()
  },
  methods: {
    // 物资类型
    getType() {
      const res = getDictDatas(DICT_TYPE.OFF_MATERIAL_TYPE)
      const list = []
      if (res) {
        for (const item of res) {
          list.push(item.label)
        }
      }
      this.typeList = list
    },
    // 物资名称
    getName() {
      const res = getDictDatas(DICT_TYPE.OFF_MATERIAL_NAME)
      const list = []
      if (res) {
        for (const item of res) {
          list.push(item.label)
        }
      }
      this.nameList = list
    },
    // 上传图片
    async handleTrigger() {
      const res = await chooseAndUploadImages()
      if (res) {
        this.$emit('input', this.value.concat(res))
      }
    },
    clickInput(type) {
      switch (type) {
        case 'materialType':
          this.showPicker = true
          break
        case 'status':
          this.showState = true
          break
        case 'itemName':
          this.showName = true
          break
      }
    },
    clickBirth() {
      this.showBirth = true
    },
    // 类型确定
    onConfirm(val) {
      this.form.materialType = val.detail.value
      this.showPicker = false
    },
    onNameConfirm(val) {
      this.form.itemName = val.detail.value
      this.showName = false
    },
    // 取消
    onCancel(type) {
      switch (type) {
        case 'materialType':
          this.showPicker = false
          break
        case 'status':
          this.showState = false
          break
        case 'itemName':
          this.showName = false
          break
      }
    },
    // 状态确定
    onStateConfirm(val) {
      this.status = val.detail.value
      switch (this.status) {
        case '未用':
          this.form.status = 2
          break
        case '已用':
          this.form.status = 1
          break
        case '维修':
          this.form.status = 3
          break
      }
      this.showState = false
    },
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    onBrith(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.form.purchaseDate = GMT
      this.showBirth = false
    },
    onCancelBrith() {
      this.showBirth = false
    },
    async submitPerson() {
      if (this.form.purchaser === undefined || this.form.purchaser.trim().length === 0) {
        Toast('请填写采购人')
        return
      }
      if (this.form.materialType === undefined || this.form.materialType.trim().length === 0) {
        Toast('请填写物资类型')
        return
      }
      if (this.form.itemName === undefined || this.form.itemName.trim().length === 0) {
        Toast('请填写物资名称')
        return
      }
      const res = await addMaterials(this.form)
      uni.navigateBack({
        url: '/pages/office/goods-materials/index',
        success() {
          const pages = getCurrentPages()// 获取页面栈
          const currPage = pages[pages.length - 1] // 当前页面a页面
          const beforePage = pages[pages.length - 2]// 上个页面b页面
          currPage.$vm.loadGoods()
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.good-info{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .good-form{
    width: 93%;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 2px;
  }
}
.mine{
  width: 100%;
}
.good-picture{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  margin: 0 auto;
  border-bottom: 1px solid #ebedf0;
  .img{
      padding-left:7px;
  }
}
</style>
<style lang="scss">
.good-picture{
  .good-upload{
    van-button{
      button{
        border:1px solid #fff !important;
      }
    }
    .van-icon:before{
      color:#739ECA !important;
    }
  }
}
.mine{
  .van-cell{
      flex-flow: column;
  }
  .van-cell:after{
    border-bottom: 1px solid #fff !important;
  }
  view textarea{
    height: 17px;
    padding: 0px 0px 0px 10px;
    height:100% !important;
    font-size: 14px;
  }
  label{
    font-size: 14px;
  }
}
.evaluates{
  view .van-cell__value{
    width: 93%;
    margin: 0 auto;
    margin-top:10px;
    background: #F9F8F8;
    .van-field__body{
      height:100px;
    }
  }
}
.selectSty{
  view{
    label{
      font-size: 14px;
    }
    .van-field__control{
      font-size: 14px;
    }
  }
}
.moreSty{
  view {
    label{
      width:100%;
      display: flex;
      white-space: nowrap;
      font-size: 14px;
    }
    input{
      padding-right: 8px;
      text-align: right;
      font-size: 14px;
    }
    textarea{
      padding-right: 8px;
      text-align: right;
      font-size: 14px;
    }
  }
  .van-field__body{
    padding-right: 16px;
  }
}
.good-form{
  .van-cell{
    padding: 10px 5px 10px 2px !important;
  }
  .van-cell__title{
    padding-left:16px;
  }
  .van-field__control{
    color:#999 !important;
    font-size: 14px;
  }
  .van-icon:before{
    color:#999;
  }
  .van-field__label{
    color:#333 !important;
    white-space: normal !important;
  }
}
.good-btns{
  width: 280px;
  height: 36px;
  margin-top:25px;
  margin-bottom: 25px;
  button{
    height:100% !important;
  }
}
</style>
